<template>
  <div class="input">
    <button type="button" @click="setNum(-step)">
      <svg class="icon" viewBox="0 0 1024 1024">
        <path d="M192 448l640 0 0 128-640 0 0-128Z"></path>
      </svg>
    </button>
    <input type="text" v-model.number="num" />
    <button type="button" @click="setNum(+step)">
      <svg class="icon" viewBox="0 0 1024 1024">
        <path
          d="M832 448 576 448 576 192 448 192 448 448 192 448 192 576 448 576 448 832 576 832 576 576 832 576Z"
        ></path>
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "update:value",
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    rand: {
      type: Array,
      // 默认值在 负无穷 ~ 正无穷  => 所有数值
      default: () => [-Infinity, +Infinity],
    },
    step: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    num: {
      get() {
        return this.value;
      },
      set(nv) {
        if (typeof nv == "number") {
          if (nv >= this.rand[0] && nv <= this.rand[1]) {
            this.$emit("update:value", nv);
          }
        }
      },
    },
  },
  methods: {
    setNum(s) {
      let temp = this.value + s;
      if (temp >= this.rand[0] && temp <= this.rand[1]) {
        this.$emit("update:value", temp);
      }
    },
  },
};
</script>

<style scoped>
.input {
  border: 1px solid #ccc;
  display: inline-block;
  font-size: 0px;
  border-radius: 6px;
  overflow: hidden;
}
.input > button {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: unset;
}
.input > button:active {
  background-color: #ccc;
}
.input svg {
  width: 10px;
  height: 10px;
}
.input > input {
  height: 26px;
  line-height: 26px;
  box-sizing: border-box;
  border: unset;
  outline: none;
  text-align: center;
  width: 50px;
}
</style>
